/**
 * @author:linjiye
 * @date: 2025/1/3
 * @desc:
 **/

import {StyleSheet, Text, View} from 'react-native'
import React from 'react'

type Props = {}

const FcStep = ({list = [
    {
        name: '爆文分解',
        step: 1
    }, {
        name: '裂变',
        step: 2
    }, {
        name: '混搭组合',
        step: 3
    }
],step=1}: Props) => {
    return (
        <View style={styles.container}>
            {list.map((item,index) => (
                <View style={styles.step} key={index}>
                    <View style={[styles.num_wrap,{backgroundColor: step >= item.step ? '#2856FF' : 'rgba(0, 0, 0, 0.15)'}]}>
                        <Text style={styles.num}>{item.step}</Text>
                    </View>
                    <Text style={[styles.name,{color: step >= item.step ? '#2856FF' : 'rgba(0, 0, 0, 0.15)'}]}>{item.name}</Text>
                    {index < list.length -1 && <Text style={[styles.line,{backgroundColor: step > item.step ? '#2856FF' : '#D8D8D8'}]}></Text>}
                </View>
            ))}
        </View>
    )
}

export default FcStep

const styles = StyleSheet.create({
    container: {
        marginTop: 8,
        marginBottom: 11,
        height: 22,
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        marginHorizontal: 16
    },
    step: {
        flexDirection: "row",
        alignItems: "center",
    },
    num_wrap:{
        borderRadius: 30,
        backgroundColor: 'rgba(0, 0, 0, 0.15)',
        flexShrink: 0,
        width: 18,
        height: 18,
        display: 'flex',
        flexDirection: 'row',
        justifyContent: "center",
        alignItems: "center"
    },
    num: {
        fontSize: 12,
        color: 'white',
    },
    name: {
        color: 'rgba(0, 0, 0, 0.15)',
        fontSize: 14,
        lineHeight: 22,
        marginLeft: 8,
    },
    line: {
        width: 36,
        height: 1,
        backgroundColor: '#D8D8D8',
        marginHorizontal: 10
    }
})